<template>
  <div class="appraise">
    <h3>{{ commentList.length }}条真实用户评论</h3>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="4">
        <div>总评数：35</div>
        <div>好评数：8</div>
        <div>差评数：2</div>
      </el-col>

      <el-col :span="20">
        <el-row type="flex" align="middle">
          <!-- 评分 -->
          <el-col :span="6" justify="center" align="middle" class="big">
            <el-progress
              type="circle"
              :width="80"
              :percentage="100"
              :stroke-width="4"
              color="#ffebcf"
              :show-text="false"
            >
            </el-progress>
            <div class="small describe" v-if="hotelData.stars < 3">一般</div>
            <div
              class="small describe"
              v-if="hotelData.stars >= 3 && hotelData.stars < 5"
            >
              推荐
            </div>

            <div class="small describe" v-if="hotelData.stars >= 5">
              非常推荐
            </div>
            <el-rate
              v-model="hotelData.stars"
              disabled
              show-score
              text-color="#ff9900"
              :score-template="`${hotelData.stars}分`"
              class="grate"
            >
            </el-rate>
            <!--
                0-2分 一般  
                3-4分 推荐
                4.5 推荐
                5分非常推荐
               -->
          </el-col>
          <!-- 环境 -->
          <el-col :span="6" class="big" justify="center" align="middle">
            <el-progress
              type="circle"
              v-if="hotelData.scores"
              :percentage="hotelData.scores.environment * 10"
              :show-text="false"
              :width="80"
              :stroke-width="4"
              color="#ff9f11"
            >
            </el-progress>

            <div class="small">
              <div>环境</div>
              <div v-if="hotelData.scores">
                {{ hotelData.scores.environment }}
              </div>
            </div>
          </el-col>

          <!-- 产品 -->
          <el-col :span="6" class="big" justify="center" align="middle">
            <el-progress
              type="circle"
              v-if="hotelData.scores"
              :percentage="hotelData.scores.product * 10"
              :show-text="false"
              :width="80"
              :stroke-width="4"
              color="#ff9f11"
            >
            </el-progress>

            <div class="small">
              <div>产品</div>
              <div v-if="hotelData.scores">{{ hotelData.scores.product }}</div>
            </div>
          </el-col>

          <!-- 服务 -->
          <el-col :span="6" class="big" justify="center" align="middle">
            <el-progress
              type="circle"
              v-if="hotelData.scores"
              :percentage="hotelData.scores.service * 10"
              :show-text="false"
              :width="80"
              :stroke-width="4"
              color="#ff9f11"
            >
            </el-progress>

            <div class="small">
              <div>服务</div>
              <div v-if="hotelData.scores">{{ hotelData.scores.service }}</div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div v-if="commentList.length != 0">
      <DetailedCommentMain
        v-for="(item, index) in commentList"
        :key="index"
        :data="item"
      />
    </div>
  </div>
</template>

<script>
import DetailedCommentMain from "./DetailedCommentMain";
export default {
  props: ["hotelData"],
  components: {
    DetailedCommentMain,
  },
  data() {
    return {
      value: 3, //评价的推荐分数
      commentList: [],
    };
  },
  mounted() {
    // console.log(this.hotelData);
    this.$axios({
      url: "/hotels/comments",
    }).then((res) => {
      console.log(res);
      this.commentList = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.appraise {
  h3 {
    margin-bottom: 20px;
  }

  .big {
    position: relative;
  }
  .small {
    position: absolute;
    top: 18px;
    left: 78px;
    width: 50px;
    height: 50px;
    // background-color: burlywood;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ff9900;
  }

  .describe {
    color: #ffebcf;
    top: 13px;
    left: 76px;
    font-size: 20px;
    transform: rotate(-45deg);
  }

  .grate {
    position: absolute;
    top: 28px;
    left: 46px;
  }

  > .el-row {
    padding-bottom: 15px;
    border-bottom: 1px dashed #e4e7ec;
    // margin-bottom: 20px;
  }
}
</style>